<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图轮播示例</title>
    <style>
        body,
        html {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        div,
        header,
        nav,
        iframe {
            box-sizing: border-box;
        }

        .ew-iframe {
            margin: 0;
            border: none;
            width: 100%;
            height: auto;
            display: block;
            overflow: hidden;
        }

        #header {
            width: 100%;
        }

        #header>.nav-container:after {
            content: " ";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        #header>.nav-container>.tab-item {
            width: 20%;
            padding: 10px 12px;
            float: left;
            text-align: center;
            border-bottom: 1px solid #234567;
            background-color: #f7f7f7;
            letter-spacing: 2px;
            font: 18px "华文琥珀", "楷体";
            color: #535455;
            cursor: pointer;
            transition: all .2s linear;
        }

        #header>.nav-container>.tab-item.active,
        #header>.nav-container>.tab-item:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: #667788;
        }

        @media (max-width:750px) {
            #header>.nav-container>.tab-item {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <header id="header">
        <nav class="nav-container">
            <div class="tab-item active" data-value="./default.html">默认轮播</div>
            <div class="tab-item" data-value="./pointer.html">点击轮播</div>
            <div class="tab-item" data-value="./slide.html">滑动轮播</div>
            <div class="tab-item" data-value="./window-shades.html">百叶窗轮播</div>
            <div class="tab-item" data-value="./all/index.html">完整轮播</div>
        </nav>
    </header>
    <iframe src="./default.html" frameborder="0" class="ew-iframe"></iframe>
</body>
<script>
    const header = document.getElementById('header');
    const tabItems = [].slice.call(header.querySelectorAll('.tab-item'));
    const iframe = document.querySelector('.ew-iframe');

    tabItems.map(tab => {
        tab.onclick = function () {
            tabItems.forEach(tab => tab.classList.remove('active'));
            this.classList.add('active');
            const url = this.dataset.value;
            iframe.setAttribute('src', url);
            setIframeHeight();
        }
    });

    function setIframeHeight() {
        iframe.onload = function () {
            setTimeout(() => {
                const _document = iframe.contentWindow.document;
                const height = Math.max(_document.body.scrollHeight, _document.documentElement.scrollHeight);
                iframe.style.height = height + 'px';
            }, 0)
        }
    }
    setIframeHeight();
</script>

</html>